<div class="main_div" ng-show="databases.length">
  <div class="title_text margin_bottom_30">{{ 'repositories.database.select.label' | translate }}</div>
  <div class="middle_div">
    <div id="dbDiv" class="margin_bottom_20 text_left right">
      <div ng-repeat="database in databases" class="db_list_items" ng-class="{active : database == selectedDatabase || databases.length == 1}" ng-click="selectDatabase(database)">{{database.name}}</div>
    </div>
    <div>
      <button id="delete" class="right margin_left_10 secondary" ng-class="{visible : selectedDatabase || databases.length == 1}"
          type="button" ng-click="deleteConnection()">{{ 'repositories.delete.label' | translate }}</button>
      <button id="edit" class="right margin_left_10 secondary" ng-class="{visible : selectedDatabase || databases.length == 1}"
          type="button" ng-click="editConnection()">{{ 'repositories.edit.label' | translate }}</button>
      <button id="new" class="right secondary" type="button" ng-click="createNewConnection()">{{ 'repositories.database.new.label' | translate }}</button>
    </div>
  </div>
</div>
<div class="main_div" ng-hide="databases.length">
  <div class="title_text margin_bottom_30">{{ 'repositories.database.select.label' | translate }}</div>
  <div class="middle_div">
    <div class="margin_bottom_20">
      <textarea id="no_conn" class="text_center" readonly="readonly">{{ 'repositories.database.none.label' | translate }}</textarea>
    </div>
    <div>
      <button class="same_width standard" type="button" ng-click="createNewConnection()">{{ 'repositories.database.create.label' | translate }}</button>
    </div>
  </div>
</div>
<div class="bottom">
  <div class="margin_bottom_20">
    <hr />
  </div>
  <div>
    <img class="left helpImg" alt="" src="images/help.svg" /><a id="btnHelp" class="left" ng-click="help()">{{ 'repositories.help.label' | translate }}</a>
    <button class="right standard" type="button" ng-click="back()">{{ 'repositories.back.label' | translate }}</button>
  </div>
</div>
